<template>

    <div ref="textWrapper" class="text-wrapper">
        <!-- 动态绑定诗句内容 -->
        <span v-for="(char, index) in revealedText" :key="index"
            :class="{ 'typing-animation': index <= currentCharIndex }">
            {{ char }}
        </span>
    </div>

</template>
<script>
import {getPoemList} from '@/api/blog/blogPoem.js'
export default {
    data() {
        return {
            // 原始诗句列表
            originalTextList: [],
            // 原始诗句列表的索引
            originalTextListIndex: 0,
            // 原始诗句
            originalText: "床前明月光，疑是地上霜。",
            // 当前显示的文本
            revealedText: "",
            // 当前显示到的字符索引
            currentCharIndex: 0,
            // 打字速度，单位是毫秒
            typingSpeed: 100,
            isTyping: true, // 控制是否正在显示诗句
            isErasing: false, // 控制是否开始逐字消失
            eraseDelay: 90, // 消失速度，单位是毫秒
            total: 0,
        };
    },
    mounted() {
        this.getPoemList(); // 获取诗句
    },
    methods: {
        type() {
            this.originalText=this.originalTextList[this.originalTextListIndex].poemContent;
            if (this.currentCharIndex < this.originalText.length) {
                this.revealedText += this.originalText[this.currentCharIndex];
                this.currentCharIndex++;
                setTimeout(this.type, this.typingSpeed);
            } else {
                // 打印完成，等待一段时间后开始消除
                setTimeout(this.startErasing, 2000); // 这里可以根据需要调整等待时间
            }
        },
        erase() {
            if (this.currentCharIndex >= 0) {
                this.revealedText = this.revealedText.slice(0, this.currentCharIndex);
                this.currentCharIndex--;
                setTimeout(this.erase, this.eraseDelay);
            } else {
                if(this.originalTextListIndex==this.originalTextList.length-1){
                    this.originalTextListIndex=-1;
                }
                // 诗句完全消失，准备下一轮打印
                this.currentCharIndex = 0; // 重置字符索引
                setTimeout(this.type, 2000); // 诗句消失后等待2秒开始下一轮打印
                this.originalTextListIndex++;
            }
        },
        startErasing() {
            this.isTyping = false;
            this.isErasing = true;
            this.erase(); // 直接调用erase方法开始消除过程
        },
        getPoemList(){
            getPoemList().then(response => {
                this.originalTextList=response.rows
                this.total=response.total
                this.type();
            })
        }
    }
};
</script>
<style scoped>
.text-wrapper {
    height: 3vh;
    border-radius: 10px;
    color: white;
    /* 如果需要透明背景，可以在这里设置，例如 */
    background-color: black;
    padding: 20px;
    text-align: center;
    /* 其他样式按需调整 */
    opacity: 0.5;
    font-size: large;
    font-weight: bold;
}

.typing-animation {
    opacity: 1;
    transition: opacity 0.5s ease-out;
    /* 可以调整动画效果 */
}

.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    /* 根据需要调整动画时间 */
}
</style>